<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: skyblue;
      }
      .zi {
        width: 100px;
        height: 100px;
        background: darkblue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- .stop  阻止事件冒泡 e.stopProgation()
        .prevent  阻止默认行为 e.preventDefault()
        .capture  添加事件监听器时使用事件捕获模式 
        .self     只当在 event.target 是当前元素自身时触发处理函数
        .once     事件只触发一次
       .passive  浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。 -->
      <div class="box" @click="fu">
        <div class="zi" @click.stop="zi"></div>
      </div>
      <form method="GET" action="http://www.baidu.com" @submit.prevent="submit">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <button type="submit">提交</button>
      </form>
      <!-- .self 只当在 event.target 是当前元素自身时触发处理函数 -->
      <div class="box" @click.self="fuclick">
        <div class="zi"></div>
      </div>
      <div @click.once="myOnce">事件只触发一次</div>
      <div
        style="width: 80%; height: 300px; overflow: auto;"
        v-on:scroll="onScroll"
      >
        <div
          style="height: 2000px;width: 100%; background: linear-gradient(red,yellow);"
        ></div>
      </div>
      <!-- 键盘事件的修饰符和事件对象  $event事件对象的操作符-->
      <div>
        <button @click="mysay($event,8)">点击事件的事件对象</button>
        <input type="text" @input="shuru" />
      </div>

      <!-- .left  鼠标的修饰符
           .right
           .middle
        -->
      <button v-on:click.ctrl="ctrlA">A</button>
      <!-- 

        .enter
        .ctrl
        .alt
        .shift
        .tab
        .delete (捕获“删除”和“退格”键)
        .esc
        .space
        .up
        .down
        .left
        .right
        .meta
        a   65   左 37   ennter 13   esc 27 
        session  
          session-id
        cookie 
        
        token 
        localStorage
       -->
      <input type="text" @keydown.ctrl.shift.67="anxia" />
      <div style="margin-bottom:300px;"></div>
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data() {
          return {}
        },
        methods: {
          anxia(e) {
            console.log(e)
          },
          ctrlA() {
            alert('按下了ctrl并点击了a')
          },
          fu() {
            alert('父元素事件触发')
          },
          zi() {
            alert('子元素事件触发')
          },
          submit() {
            alert('提交')
          },
          fuclick() {
            alert('只本身元素触发')
          },
          myOnce() {
            alert('只触发一次')
          },
          onScroll() {
            console.log(1111)
          },
          shuru(e) {
            if (e.data == 'd') {
              alert('你按下了d')
            }
            // console.log(e.keyCode)
          },
          mysay(e) {
            console.log(e)
          }
        }
      })
    </script>
  </body>
</html>
